<!--
 * @Author: Rv_Jiang
 * @Date: 2022-05-31 22:22:25
 * @LastEditors: Rv_Jiang
 * @LastEditTime: 2022-06-18 12:10:59
 * @Description: 富文本编辑器二次封装
 * @Email: Rv_Jiang@outlook.com
-->
<script setup lang="ts" name="rvEditor">
  import MdEditor from 'md-editor-v3'
  import 'md-editor-v3/lib/style.css'

  const emit = defineEmits(['update:value', 'getCatalog', 'save'])
  const props = defineProps({
    value: {
      type: String,
      required: true,
    },
    theme: {
      type: String,
      default: 'vuepress',
    },
    pageFullScreen: Boolean,
    previewOnly: {
      type: Boolean,
      default: true,
    },
  })
</script>

<template>
  <div id="rv-editor">
    <!-- 文章内容 -->
    <md-editor
      :model-value="props.value"
      editor-id="rv-editor-body"
      :preview-theme="props.theme"
      :show-code-row-number="true"
      :preview-only="props.previewOnly"
      @change="(value) => emit('update:value', value)"
      @get-catalog="(list:any)=>emit('getCatalog',list)"
      @save="(value) => emit('save', value)"
    />
  </div>
</template>

<style lang="scss" scoped>
  $codeBkColor: #282c34;
  $codeBkColorDark: #1a1a1a;
  $colorDark: #999;
  #rv-editor {
    #rv-editor-body {
      padding: 0 20px;
      background-color: #f4f4f4;

      /* 自定义代码块样式 */
      :deep(pre) {
        position: relative;
        border-radius: 5px;
        box-shadow: #00000055 0px 2px 2px;

        code {
          position: relative;
          padding: 1em;
          background-color: $codeBkColor;
          color: #a9b7c6;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          margin: 0;

          > * {
            line-height: 1.6;
          }
          * {
            font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New,
              monospace;
          }
        }

        .copy-button {
          color: $colorDark;
          position: absolute;
          font-size: 12px;
          top: 9px;
          right: 10px;
          cursor: pointer;
        }

        &::before {
          content: '';
          display: block;
          background: url();
          height: 32px;
          width: 100%;
          background-size: 40px;
          background-repeat: no-repeat;
          background-color: #282c34;
          margin-bottom: 0;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          background-position: 10px 10px;
        }
      }
    }
  }
</style>
